<template>
  <div
      class="draggable-dialog"
      :style="{ left: left + 'px', top: top + 'px', width: width }"
      v-show="dialogVisible"
  >
    <!-- 头部区域 - 可拖拽 -->
    <div class="dialog-header" @mousedown="startDrag">
      <div class="header-title">
        <slot name="title">{{ title }}</slot>
      </div>
      <div class="header-actions">
        <i class="el-icon-close close-icon" @click="handleClose"></i>
      </div>
    </div>

    <!-- 内容区域 -->
    <div class="dialog-body">
      <slot></slot>
    </div>

    <!-- 底部区域 -->
    <div class="dialog-footer" v-if="$slots.footer">
      <slot name="footer"></slot>
    </div>
  </div>
</template>

<script>
export default {
  name: 'DraggableDialog',
  props: {
    // 对话框标题
    title: {
      type: String,
      default: '标题',
    },
    // 是否显示
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    // 初始宽度
    width: {
      type: String,
      default: '500px',
    },
    // 初始位置
    initialPosition: {
      type: Object,
      default: () => ({
        left: 0,
        top: 0,
      }),
    },
  },
  data() {
    return {
      left: 0,
      top: 0,
      isDragging: false,
      startX: 0,
      startY: 0,
      startLeft: 0,
      startTop: 0,
    };
  },
  watch: {
    dialogVisible: {
      handler(val) {
        if (val) {
          this.initPosition();
        }
      },
      immediate: true,
    },
  },
  methods: {
    // 初始化位置
    initPosition() {
      this.$nextTick(() => {
        if (this.initialPosition.left || this.initialPosition.top) {
          this.left = this.initialPosition.left;
          this.top = this.initialPosition.top;
        } else {
          // 默认居中显示
          const windowWidth = window.innerWidth;
          const windowHeight = window.innerHeight;
          const dialogWidth = this.$el.offsetWidth;
          const dialogHeight = this.$el.offsetHeight;

          this.left = (windowWidth - dialogWidth) / 2;
          this.top = (windowHeight - dialogHeight) / 3;
        }
      });
    },
    // 开始拖拽
    startDrag(event) {
      if (event.target.className.includes('close-icon')) return;

      this.isDragging = true;
      this.startX = event.clientX;
      this.startY = event.clientY;
      this.startLeft = this.left;
      this.startTop = this.top;

      document.addEventListener('mousemove', this.onDrag);
      document.addEventListener('mouseup', this.stopDrag);
    },
    // 拖拽中
    onDrag(event) {
      if (!this.isDragging) return;

      const deltaX = event.clientX - this.startX;
      const deltaY = event.clientY - this.startY;

      // 计算新位置
      let newLeft = this.startLeft + deltaX;
      let newTop = this.startTop + deltaY;

      // 获取元素和窗口尺寸
      const element = this.$el;
      const elementRect = element.getBoundingClientRect();
      const windowWidth = window.innerWidth;
      const windowHeight = window.innerHeight;

      // 限制边界
      newLeft = Math.max(0, Math.min(newLeft, windowWidth - elementRect.width));
      newTop = Math.max(0, Math.min(newTop, windowHeight - elementRect.height));

      this.left = newLeft;
      this.top = newTop;
    },
    // 停止拖拽
    stopDrag() {
      this.isDragging = false;
      document.removeEventListener('mousemove', this.onDrag);
      document.removeEventListener('mouseup', this.stopDrag);
    },
    // 关闭对话框
    handleClose() {
      this.$emit('close');
    },
  },
  beforeDestroy() {
    document.removeEventListener('mousemove', this.onDrag);
    document.removeEventListener('mouseup', this.stopDrag);
  },
};
</script>

<style scoped>
.draggable-dialog {
  position: fixed;
  background: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  display: flex;
  flex-direction: column;
  z-index: 2000;
}

.dialog-header {
  padding: 15px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #fff;
  border-bottom: 1px solid #e4e7ed;
  cursor: move;
  user-select: none;
}

.header-title {
  font-size: 16px;
  color: #303133;
  font-weight: 500;
}

.header-actions {
  cursor: pointer;
}

.close-icon {
  font-size: 16px;
  color: #909399;
  cursor: pointer;
  transition: color 0.2s;
}

.close-icon:hover {
  color: #303133;
}

.dialog-body {
  flex: 1;
  max-height: 75vh;
  overflow: auto;
  background: #1a1a1a;
}

.dialog-footer {
  padding: 15px 20px;
  border-top: 1px solid #e4e7ed;
  text-align: right;
}

.dialog-header:active {
  cursor: grabbing;
}
</style>
